<template>
  <MyDrawer title="" size="40%" ref="MyDrawer" @saveOrUpdate="sendPost">
    <el-form label-position="top" class="post-form">
      <el-form-item label='标题'>
        <el-input placeholder='请输入发布的帖子标题'
                  v-model='selectRow.title'></el-input>
      </el-form-item>
      <el-form-item label="帖子类型">
        <el-select v-model="selectRow.type" placeholder="请选择帖子类型">
          <el-option label="C语言" value="C语言"></el-option>
          <el-option label="HTML" value="HTML"></el-option>
          <el-option label="JAVA" value="JAVA"></el-option>
          <el-option label="Python" value="Python"></el-option>
          <el-option label="云计算" value="云计算"></el-option>
          <el-option label="软件工程" value="软件工程"></el-option>
          <el-option label="计算机科学与技术" value="计算机科学与技术"></el-option>
          <el-option label="信息安全" value="信息安全"></el-option>
          <el-option label="大数据" value="大数据"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='发布内容'>
        <vue-editor v-model="selectRow.content"></vue-editor>
      </el-form-item>
    </el-form>
  </MyDrawer>
</template>

<script>
import MyDrawer from "@/components/MyDrawer.vue";
import { VueEditor } from "vue2-editor";
import Tinymce from "@/components/Tinymce.vue";

export default {
  components: { MyDrawer, VueEditor, Tinymce },
  data() {
    return {
      fileList: [],
      selectRow: {},
    };
  },
  methods: {
    // 打开发帖弹框
    open() {
      this.$refs.MyDrawer.open(this.selectRow, true);
    },

    // 确认发帖
    sendPost() {

      // 调用发帖 API
      this.request.post("/postCode", this.selectRow).then((res) => {
        if (res.code === '200') {
          this.messageSuccess("发帖成功");
          this.$emit("sendSuccess");
          this.$refs.MyDrawer.close();
        } else {
          this.messageError(res.msg);
        }
      });
    },

    handleAvatarSuccess(res) {
      if (res.code === '200') {
        if (!this.selectRow.menuImages) {
          this.selectRow.menuImages = [];
        }
        this.selectRow.menuImages.push(res.data);
      }
    },
  },
};
</script>

<style scoped>
.post-form {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input__inner,
.el-select,
.vue-editor {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: border-color 0.3s;
}

.el-input__inner:focus,
.el-select:focus,
.vue-editor:focus-within {
  border-color: #409eff;
}

.el-form-item__label {
  color: #606266;
  font-weight: 500;
}

.el-button {
  border-radius: 8px;
  border: none;
  padding: 12px 20px;
  font-size: 14px;
  transition: background-color 0.3s;
}

.el-button--primary {
  background-color: #409eff;
  color: #fff;
}

.el-button--primary:hover {
  background-color: #66b1ff;
}

.el-button:hover {
  background-color: #f0f0f0;
}
</style>
